<template>
  <div>
    <!-- 页面基础模板 -->
    <base-header-footer
      :isShowContentTitle="false"
      :isShowBreadCrumb="true"
      :isShowArchived="false"
      v-if="is404"
    >
      <!-- isShowTitle : 布尔值，是否显示当前页面标题组件-->
      <!-- isShowBreadCrumb : 布尔值，是否显示当前页面面包屑导航组件-->
      <!-- isShowArchived : 布尔值，是否显示当前页面归档组件-->
      <template slot="content-item">
        <!-- 内容插槽 -->
        <div class="error-404">
          <img src="@/static/404.png" alt="" />
          <h1>404 - 页面未找到</h1>
          <p>抱歉，您访问的页面不存在或者已经删除。 <a href="/">返回首页</a></p>
        </div>
      </template>
    </base-header-footer>
    <!-- 页面基础模板 -->
    <base-header-footer
      :isShowContentTitle="false"
      :isShowBreadCrumb="false"
      :isShowArchived="true"
      v-else
    >
      <!-- isShowTitle : 布尔值，是否显示当前页面标题组件-->
      <!-- isShowBreadCrumb : 布尔值，是否显示当前页面面包屑导航组件-->
      <!-- isShowArchived : 布尔值，是否显示当前页面归档组件-->
      <template slot="content-item-breadCrumb">
        <BreadCrumb v-if="isGoBack"></BreadCrumb>
      </template>
      <template slot="content-item">
        <!-- 内容插槽 -->
        <ContentList @isShow404="isShow404"></ContentList>
      </template>
    </base-header-footer>
  </div>
</template>

<script>
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
import ContentList from "@/components/contentlist/ContentList.vue";
import BaseHeaderFooter from "@/components/baseheaderfooter/BaseHeaderFooter.vue";
import { mapState } from "vuex";
export default {
  name: "",
  head(){
    return {
      title: this.headTitle,
    }
  },
  components: {
    BreadCrumb,
    ContentList,
    BaseHeaderFooter,
  },
  data() {
    return {
      is404: false,
    };
  },
  computed: {
    ...mapState(["isGoBack","headTitle"]),
  },
  methods: {
    isShow404(value) {
      this.is404 = value;
      if (value) {
        this.$cookies.set("activePathArr", [
          { id: 1, path: "/", title: "首页" },
          {
            id: 2,
            title: "404错误",
          },
        ]);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.error-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0;
  img {
    width: 100%;
    max-width: 250px;
  }
  h1 {
    font-size: 28px;
    text-shadow: 3px 5px 2px rgb(0 0 0 / 30%);
    margin: 30px 0 20px;
    line-height: 1.4;
  }
  p {
    color: rgba(38, 38, 38, 0.8);
    font-size: 14px;
    a {
      color: #0088cc;
      &:hover {
        color: #3361ea;
      }
    }
  }
}
</style>